<!DOCTYPE html>
<html>
    <head>
        <title>Position</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0;
                margin: 0;                
            }            
            .main {
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
            .formpane {
                top: 10px;
                right: 10px;   
                background: rgba(230, 230, 230, 0.85);
            } 
        </style>    
        
        <script>
            htconfig = {                
                Style: {
                    'edge.width': 1
                }                       
            };
        </script>                                
        <script src="../../../../lib/core/ht.js"></script> 
        <script src="../../../../lib/plugin/ht-modeling.js"></script> 
        <script src="../../../../lib/plugin/ht-form.js"></script> 
        <script>
                        
            ht.Default.setImage('DieTexture', '');
                                                
            function init(){                                                                                                                                              
                dm = new ht.DataModel();
                g3d = new ht.graph3d.Graph3dView(dm);    
                        
                view = g3d.getView();
                view.className = 'main';
                document.body.appendChild(view);    
                window.addEventListener('resize', function (e) {
                    g3d.iv();
                }, false);                                
                
                createFormPane();
                formPane.getView().className = 'formpane';
                document.body.appendChild(formPane.getView());                  
                 
                g3d.setEye(0, 700, 1000);
                g3d.setCenter(0, 150, 0);
                g3d.setGridVisible(true); 
              
                node1 = createNode(-300, Math.PI/6, false, false);
                node2 = createNode(300, 0, true, true);
                
                currentNode = null;
                sm = dm.sm();                                                
                sm.ms(function(e){
                    currentNode = sm.ld();
                    formPane.setDisabled(currentNode == null);
                    if(currentNode){
                        formPane.v('frameVisible', currentNode.s('wf.visible'));
                        formPane.v('frameShort', currentNode.s('wf.short'));
                        formPane.v('frameWidth', currentNode.s('wf.width'));                        
                        formPane.v('frameSize', currentNode.a('frame.size'));
                        formPane.v('frameRotation', currentNode.a('frame.rotation'));                        
                        ['left', 'right', 'top', 'bottom', 'front', 'back'].forEach(function(face){
                            formPane.v(face + 'Angle', currentNode.s(face + '.angle'));    
                        });
                    }                    
                });
                sm.setSelectionMode('single');                
                sm.ss(node1);    
                
                g3d.getWireframe = function(data){
                    if(data.s('wf.visible')){
                        var size = data.a('frame.size');
                        return {
                            width: data.s('wf.width'),
                            short: data.s('wf.short'),
                            color: data.s('wf.color'),
                            mat: ht.Default.createMatrix([
                                { s3: [size, size, size] },
                                { r3: [0, data.a('frame.rotation'), 0]}
                            ])
                        };
                    }
                    return null;
                };   
                
            }
            
            function createNode(x, angle, short, toggleable){
                var node = new ht.CSGBox();
                dm.add(node);
                node.s3(300, 300, 300);
                node.p3(x, 150, 0);   
                node.s({                   
                    'all.image': 'DieTexture',                    
                    'back.uv': [0.25, 0.75, 0.25, 1, 0.5, 1, 0.5, 0.75],                    
                    'front.uv': [0.25, 0.25, 0.25, 0.5, 0.5, 0.5, 0.5, 0.25],
                    'top.uv': [0.25, 0.5, 0.25, 0.75, 0.5, 0.75, 0.5, 0.5],
                    'bottom.uv': [0.25, 0, 0.25, 0.25, 0.5, 0.25, 0.5, 0],
                    'left.uv': [0, 0.75, 0, 1, 0.25, 1, 0.25, 0.75],
                    'right.uv': [0.5, 0.75, 0.5, 1, 0.75, 1, 0.75, 0.75],
                    
                    'left.angle': angle,
                    'right.angle': angle,
                    'top.angle': angle,
                    'bottom.angle': angle,
                    'front.angle': angle,
                    'back.angle': angle,
                    
                    'left.toggleable': toggleable,
                    'right.toggleable': toggleable,
                    'top.toggleable': toggleable,
                    'bottom.toggleable': toggleable,
                    'front.toggleable': toggleable,
                    'back.toggleable': toggleable,                                        
                                        
                    'left.axis': 'bottom',
                    'right.axis': 'bottom',
                    'top.axis': 'top',
                    'bottom.axis': 'bottom',
                    'front.axis': 'bottom',
                    'back.axis': 'bottom',
                    
                    'wf.visible': true,
                    'wf.short': short,
                    'wf.width': 3
                });                
                node.a({     
                    'frame.size': 1,
                    'frame.rotation': 0                    
                }); 
                return node;
            }
            
            function createFormPane(){                                                
                formPane = new ht.widget.FormPane();
                formPane.setWidth(230);
                formPane.setHeight(350);

                formPane.addRow([{ element: 'Face:', font: 'bold 12px arial, sans-serif' }], [0.1]);
                formPane.addRow([], [0.1], 1.01, {background: '#43AFF1'});
                                             
                ['left', 'right', 'top', 'bottom', 'front', 'back'].forEach(function(face){
                    formPane.addRow([face, 
                        {
                            id: face + 'Angle',
                            slider: {                    
                                min: 0,
                                max: Math.PI/2,
                                onValueChanged: function(){                             
                                    if(currentNode){
                                        currentNode.s(face + '.angle', this.getValue());
                                    }                                     
                                }
                            }
                        }
                    ], [70, 0.1]);                    
                });
                                             
                formPane.addRow([{ element: 'Frame:', font: 'bold 12px arial, sans-serif' }], [0.1]);
                formPane.addRow([], [0.1], 1.01, {background: '#43AFF1'});
                formPane.addRow([
                    {
                        id: 'frameVisible',
                        checkBox: {
                            label: 'visible',
                            onValueChanged: function(oldValue, newValue){
                                if(currentNode){
                                    currentNode.s('wf.visible', newValue);
                                }                                
                            }
                        }
                    },
                    {
                        id: 'frameShort',
                        checkBox: {
                            label: 'short',
                            onValueChanged: function(oldValue, newValue){
                                if(currentNode){
                                    currentNode.s('wf.short', newValue);
                                }                               
                            }
                        }        
                    }
                ], [0.1, 0.1]); 
                formPane.addRow(['width', 
                    {
                        id: 'frameWidth',
                        slider: {                    
                            min: 0,
                            max: 8,
                            step: 1,
                            onValueChanged: function(oldValue, newValue){     
                                if(currentNode){
                                    currentNode.s('wf.width', newValue);
                                }                                 
                            }
                        }
                    }
                ], [70, 0.1]);                 
                formPane.addRow(['size:', 
                    {
                        id: 'frameSize',
                        slider: {                    
                            min: 0,
                            max: 2,
                            onValueChanged: function(){
                                if(currentNode){
                                    currentNode.a('frame.size', this.getValue());
                                }                                   
                            }
                        }
                    }
                ], [70, 0.1]);  
                formPane.addRow(['rotation', 
                    {
                        id: 'frameRotation',
                        slider: {                    
                            min: 0,
                            max: Math.PI,
                            onValueChanged: function(oldValue, newValue){       
                                if(currentNode){
                                    currentNode.a('frame.rotation', this.getValue());
                                }                                  
                            }
                        }
                    }
                ], [70, 0.1]);                  
            }
            

        </script>
    </head>
    <body onload="init();">
    </body>
</html>
